<template>
	 <view class="wrap">
	 	<view class="item_top">
			<view class='top_tit' @click="showPopupLayer">
				<text>{{status === 4 ? '已完成' :'保养中'}}</text>  <uni-icons color="#999999" size="16" type="arrowright"></uni-icons>
			</view>
	 	</view>
		<view class="item_task">
			<view class="section">
				<uni-collapse>
					<uni-collapse-item open="true" title="任务设置" :isStateSet="isStateSet" >
						<!-- <view class="task_tit">
							<text>任务设置</text>
						</view> -->
						<view class="task_state" @click="eleStateClcik">
							<view class="state_L">电梯状态</view>
							<view class="state_R">{{eleStateVal === 1 ? '运行中':'停梯'}} 
							 <uni-icons color="#999999" size="16" type="arrowright"></uni-icons>
							</view>
						</view>
						<view class="task_time" @click="showModalTime">
							<view class="time_L">预计时间</view>
							<view :class="timeStrTimes ? 'time_R':'time_Rs'">
							{{timeStrTimes ? timeStrTimes : "请选择"}} 
							<uni-icons color="#999999" size="16" type="arrowright"></uni-icons>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<!-- 本月重点 start -->
		<view class="item_month">
			<view class="section">
				<!-- <uni-collapse>
					<uni-collapse-item :open="opens" title="本月重点" :isStateEidt="isStateEidt" @akeyEditClick="akeyEditClick('edit')" > -->
						<view class="month_tit" >
							<view class="tits_L" @click="showEditClick">本月重点</view>
							<view v-if="isStateEidt" class="tits_R" @click="akeyEditClick('edit')">
								<block v-if="isComplete">
									<uni-icons type="compose" size="16" color="#0091FF"></uni-icons>编辑
								</block>
								<block v-else>
									<text style="color: #cccccc; font-size: 28rpx;">未完成</text>
								</block>
							</view>
							<uni-icons style="margin-right: 10rpx;" :type="opens?'arrowup':'arrowdown'" size="20" color="#999999" ></uni-icons>
						</view>
						<block v-if="opens">
							<view class="month_state" >
								<view class="mstate_L">部件类型</view>
								<view class="mstate_R">{{planData.name ? planData.name : '暂无部件'}}</view>
							</view>
							<block v-if="isComplete">
								<view class="month_record" >
									<view class="rec_L">检测记录</view>
									<view class="rec_R">
											<block class="" v-for="(son,i) in planData.imgUrl" :key="i">
												<image @click="imageClick(planData.imgUrl,i)" :src="son" ></image>
											</block>
										<view class="rec_area">
											<text>{{planData.checkDesc?planData.checkDesc:'备注内容'}}</text>
										</view>
									</view>
								</view>
								<view class="month_record" v-if="planData" >
									<view class="rec_L">处理结果</view>
									<view class="rec_R">
										<block class="" v-for="(child,i) in planData.disposeImgUrl" :key="i">
											<image @click="imageClick(planData.disposeImgUrl,i)" :src="child" ></image>
										</block>
										<view class="rec_area">
											<text>{{planData.disposeDesc?planData.disposeDesc:'备注内容'}}</text>
										</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="month_time" @click="akeyEditClick('add')" >
									<view class="mtime_L">保养记录</view>
									<view class="mtime_R">去完成 <uni-icons color="" size="16" type="arrowright"></uni-icons></view>
								</view>
							</block>
						</block>
						<!-- <block v-if="!planData">
							<view class="nodata" >
								本月暂无重点保养
							</view>
						</block> -->
					<!-- </uni-collapse-item>
				</uni-collapse> -->
			</view>
		</view>
		<!-- 本月重点 end -->
		<!-- 普通保养 start -->
		<view class="item_record">
			<view class="record">
				<view class="record_L">新增保养记录</view>
				<block v-if="status !== 4 ">
					<view class="record_R" @click="addMianPage('add')">
						 <uni-icons type="plusempty" size="16" color="#0091FF"></uni-icons>添加
					</view>
				</block>
			</view>
			<block v-if="planListData.length > 0" >
				<view class="taskOne" v-for="(list,a) in planListData" :key="list.groupId">
					<view class="taskOne_tit" >
						<view class="tit_L">{{a > 9 ?`作业${a+1}`: `作业0${a+1}`}}</view>
						<block v-if="status !== 4 ">
							<view class="tit_R" @click="addMianPage('edit',list)">
								已添加{{list.planCheckVoList.length}}个部件
								<uni-icons color="" size="14" type="arrowright" />
							</view>
						</block>
					</view>
					<!-- start  -->
					<block v-for="(item,j) in list.planCheckVoList" :key="item.groupId" >
						<view class="taskOne_type">
							<view class="type_L">部件类型</view>
							<view class="type_R">{{item.name}}</view>
						</view>
						<view class="taskOne_record" >
							<view class="trec_L">检测记录</view>
							<view class="trec_R">
								<block class="" v-for="(son,i) in item.imgUrl" :key="i">
									<image @click="imageClick(list.planCheckVoList[j].imgUrl,i)" :src="son" ></image>
								</block>
								<view class="trec_area">
									<text>{{item.checkDesc?item.checkDesc:'备注内容'}}</text>
									<!-- <textarea :value="item.checkDesc" placeholder="请在此输入备注…"  /> -->
								</view>
							</view>
						</view>
						<view class="taskOne_record" >
							<view class="trec_L">处理结果</view>
							<view class="trec_R">
								<block class="" v-for="(child,i) in item.disposeImgUrl" :key="i">
									<image @click="imageClick(list.planCheckVoList[j].disposeImgUrl,i)" :src="child" ></image>
								</block>
								<view class="trec_area">
									<text>{{item.disposeDesc?item.disposeDesc:'备注内容'}}</text>
									<!-- <textarea :value="item.disposeDesc" placeholder="请在此输入备注…"  /> -->
								</view>
							</view>
						</view>
					</block>
					<!-- end -->
				</view>
			</block>
			<block v-else>
				<view class="empty" >
					未添加任何保养记录 
				</view>
			</block>
		</view>
		<!-- 普通保养 end -->
		<!-- <view style="height:98rpx; background: #FFFFFF;"></view> -->
		<view class="item_botm" @click="completeClick" >
			<view :class="status === 4 ? 'botms':'botm'">
				{{status === 4 ? '已完成' :'保养完成'}}
			</view>
		</view>
		
		<neilmodal
		 :show="show" 
		 @close="closeModal"
		  title="电梯状态"
		 @cancel="cancelClick"
		 @confirm="confirmClick"
		>
		<view class="statusType">
			<view v-for="(item, index) in typeList" :key="index" @click="changeType(item)">
				<text>{{ item.name }}</text>
				<uni-icons :type="item.value === eleStateValRt ? 'circle-filled' : 'circle'" size="16" :color="item.value === eleStateValRt ? '#0091ff' : '#999'"></uni-icons>
			</view>
		</view>
		</neilmodal>
		<neilmodal
		 :show="showsTime" 
		 @close="closeModalTime"
		 @confirm="confirmTime"
		 :title="timeChange"
		>
		<view class="">
			<apicker
				startYear="2017"
				endYear="2039"
				:value="timeStrTimes"
				:item-height="itemHeight"
				:current="true"
				expand="360"
				:disabled-after="false"
				@change="handlerChange"
			></apicker>
		</view>
		</neilmodal>
		
		<task-tracking :list="repairLogList" :show="showTarkLog" :plan-id="homeData.id" @close="closeTaskLog"></task-tracking>
	 </view>
</template>

<script>
import neilmodal from '@/components/neil-modal/neil-modal.vue';
import unidatacheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
import popupLayer from '@/components/popup-layer/popup-layer.vue';
import TaskTracking from '@/components/task-tracking/index.vue';
import {
	updateElevatorStatus,
	updatePlanFinishTime,
	getPlanDetail,
	accomplishCheck,
	repairLog
} from '@/apis/maintains.js';
import apicker from '@/components/w-picker/a-pickers.vue';
import {formatSeconds ,formatTime} from '@/utils/utils.js';
	
export default {
	name:'maintains',
	data() {
		return {
			itemHeight:`height: ${uni.upx2px(88)}px;`,
			show:false,
			opens:true,
			showsTime:false,
			isStateEidt:true,// 重点保养状态编辑
			isStateSet:false,// 任务设置状态
			typeList: [
				{value:1,name:'运行中'},
				{value:2,name:'停梯'},
			],
			eleStateVal:'',
			eleStateValRt:1,
			eleStateCount:0,
			dateTime: '',
			popupStatus:false,
			dateVisible1:false,
			result:{},
			homeData:{},// 任务数据
			timeChange:'预计完成时间25分钟',
			timeStr:'',
			timeStrTimes:'',
			planData:{},// 重点保养
			planListData:[],// 普通保养
			repairLogList:[],// 保养中 数据,
			status:null ,// 保养完成状态，
			showTarkLog:false,// 任务追踪,
			isComplete:true// 未完成状态
		};
	},
	components:{
		neilmodal,
		unidatacheckbox,
		apicker,
		popupLayer,
		TaskTracking
	},
	onLoad(options) {
		if (Object.keys(options).length > 0) {
			this.homeData = JSON.parse(options.obj);
			this.initPlanDetail(JSON.parse(options.obj).id);
		}
	},
	onShow(opt) {
		if (opt) {
			this.initPlanDetail(opt.id);
		}
	},
		
	methods:{
		// 查看大图
		imageClick(imgarr = [],i) {
			if (imgarr.length > 0) {
				this.$previewMedia({
					current:i,
					sources: imgarr
				});
			}
		},
		// 保养完成
		completeClick() {
			if (this.status === 4) return;
			let planData = this.planData || {};
			if (Object.keys(planData).length > 0) {
				planData.imgUrl = planData.imgUrl ? planData.imgUrl : [];
				planData.disposeImgUrl = planData.disposeImgUrl ? planData.disposeImgUrl : [];
				if ((planData.imgUrl.length <= 0 && !planData.checkDesc) || (planData.disposeImgUrl.length <= 0 && !planData.disposeDesc)) {
					uni.showToast({
						title:'请编辑重点保养',
						icon:'none'
					});
					return;
				}
			}
			if (Object.keys(planData).length > 0 || this.planListData.length > 0) {
				accomplishCheck({
					id:this.homeData.id,
					status:4
				}).then(res=>{
					if (res.code == 200) {
						uni.showToast({
							title:'保养成功',
							icon:'success'
						});
						this.$store.commit('refreshData',true);
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/home/index'
							});
						},1000);
					} else {
						uni.showToast({
							title:'系统错误',
							icon:'none'
						});
					}
				});
			}
		},
		// 重点保养编辑
		akeyEditClick(state) {
			this.opens = true;
			let planData = this.planData || {};
			if (Object.keys(planData).length > 0) {
				uni.navigateTo({
					url: './com/addMaintain?obj=' + JSON.stringify(this.homeData) + '&checkId=' + JSON.stringify(planData) + '&akeyState=' + true
				});
			}
		},
		// 添加 编辑
		addMianPage(type,item) {
			let targetUrl = ''; 
			if (type == 'add') {
				targetUrl = './com/addMaintain?obj=' + JSON.stringify(this.homeData);
			} else {
				targetUrl = './com/addMaintain?obj=' + JSON.stringify(this.homeData) + '&checkId=' + JSON.stringify(item);
			}
			uni.navigateTo({
				url: targetUrl
			});
		},
		// tabGoPgaes(objData){
		// 	let pages = getCurrentPages()
		// 	let len = pages.length,
		// 		target = objData.url || ""
		// 	if(objData.obj && objData.checkId && objData.akeyState ){
		// 		target = target + "?obj=" + objData.obj +"&checkId=" + objData.checkId + "&akeyState="+true
		// 	}else if(objData.obj && objData.checkId){ 
		// 		target = target + "?obj=" +objData.obj+ "&checkId=" +objData.checkId 
		// 	}else if(objData.obj){
		// 		target = target + "?obj=" +objData.obj
		// 	}
		// 	if(len < 3){
		// 		uni.navigateTo({
		// 			url:target
		// 		})
		// 	}else{
		// 		uni.redirectTo({
		// 			url:target
		// 		})
		// 	}
		// },
		// 获取保养任务详情
		initPlanDetail(id) {
			getPlanDetail({
				id:id
			}).then(res=>{
				if (res.code == 200) {
					let planCheckVo = res.data.planCheckVo;
					if (res.data.status == 4) { // 重点保养的编辑显示隐藏
						this.isStateEidt = false;
					} else {
						this.isStateEidt = true;
					}
					if (!res.data.finishDate) {// 任务设置 状态
						this.isStateSet = true;
					}
					this.planData = planCheckVo;
					planCheckVo.imgUrl = planCheckVo.imgUrl ? planCheckVo.imgUrl : [];
					planCheckVo.disposeImgUrl = planCheckVo.disposeImgUrl ? planCheckVo.disposeImgUrl : [];
					if (!planCheckVo.checkDesc && planCheckVo.imgUrl.length <= 0 && !planCheckVo.disposeDesc && planCheckVo.disposeImgUrl.length <= 0) {
						this.isComplete = false;
					} else {
						this.isComplete = true;
					}
						
					this.timeStrTimes = res.data.finishDate;
					this.planListData = res.data.planCheckGroups;
					this.eleStateVal = res.data.isStop;
					this.eleStateValRt = res.data.isStop;
					// this.elevatorId = res.data.elevatorId;
					this.status =  res.data.status;
				} else {
					uni.showToast({
						title:'系统错误',
						icon:'none'
					});
				}
			});
		},
		// 预计时间 选择
		handlerChange(res) {
			let _this = this;
			_this.result = {...res};   
			if (typeof(res.obj.date) == 'object') {
				let totalTime = res.obj.date.value + ' ' + res.obj.hour.value + ':' + res.obj.minute.value;
				let todayDateOne = new Date(); 
				let todayDateTwo = new Date(totalTime); 
				let s1 = todayDateOne.getTime() / 1000;
				let s2 = todayDateTwo.getTime() / 1000;
				let s3 = parseInt(s2 - s1);
				let times = formatSeconds(s3);
					
				_this.timeStr = totalTime; 
				_this.timeChange = `预计完成时间${times}`;
			}
		},
			 showEditClick() {
			this.opens = !this.opens;
			 },
		// 预计时间 确定
		confirmTime() {
			let temp = '';
			if (!this.timeStr) {
				temp = formatTime(new Date().getTime(), '/',true);
			} else {
				temp = this.timeStr.replace(/-/g, '/');
				if (temp && temp.length < 18) {
					temp = temp + ':00';
				}
			}
			const todayTime = formatTime(new Date().getTime(),'/',true);
			if (new Date(todayTime) >= new Date(temp)) {
				uni.showToast({
					title:'预计时间不能小于等于当前时间',
					icon:'none'
				});
				return;
			}
			if (this.timeStr) {
				updatePlanFinishTime({
					id:this.homeData.id,
					finishDate:temp.replace(/\//g,'-')
				}).then(res=>{
					if (res.code == 200) {
						this.timeStrTimes = this.timeStr;
						this.isStateSet = false;
					} else {
						uni.showToast({
							title:'系统错误',
							icon:'none'
						});
					}
				});
			}
		},
			
		closeTaskLog() {
			this.showTarkLog = false;
		},
		// 保养中 
		showPopupLayer() {
			this.showTarkLog = true;
		},
			
		// 预计时间 关闭
		closeModalTime() {
			this.showsTime = false;
		},
		// 预计时间 显示
		showModalTime() {
			if (this.status === 4) return;
			this.showsTime = true;
		},
		// 关闭modal
		closeModal() {
			this.show = false;
		},
		// 选择电梯状态
		changeType(item) {
			this.eleStateValRt = item.value;
		},
		// 电梯状态 确定
		confirmClick() {
			updateElevatorStatus({
				planId:this.homeData.id,
				id:this.homeData.elevatorId,
				isStop:this.eleStateValRt
			}).then(res=>{
				if (res.code == 200) {
					this.eleStateVal = this.eleStateValRt;
				} else {
					uni.showToast({
						title:'系统错误',
						icon:'none'
					});
				}
			});
		},
		// 电梯状态
		eleStateClcik() {
			if (this.status === 4) return;
			this.show = true;
		},
		// 电梯状态 取消
		cancelClick() {
			this.show = false;
		},
			
	},
	mounted() {
			
	}
};
</script>

<style lang="scss">
	page{
		 background-color: #F3F6F8;
	}
	%widthMargin {width: 720rpx;margin: 0 auto;};
	.wrap{
		// width: 720rpx;
		// margin: 0 auto;
		height: calc(100vh - 100rpx); 
		overflow-y: auto;
		overflow-x: hidden;
	}
	.statusType {
		view {
			height: 112rpx;
			display: flex;
			justify-content: space-between;
		}
	}
	.section{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		color: #333;
	}
	.item_top{
		height: 114rpx;
		background-color: #FFFFFF;
		line-height: 114rpx;
		// border: 1rpx red solid;
		.top_tit{
			@extend %widthMargin;
			text{
				font-size: 36rpx;
				font-weight: 600;
				color: #333;
			}
		}
		
	}
	.item_task{
		background-color: #f3f6f8;
		margin-top: 20rpx;
		.task_tit{
			@extend %widthMargin;
			padding: 20rpx;
			text{
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		.task_state{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1rpx #e9e9e9 solid;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			.state_L{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
			.state_R{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
		}
		.task_time{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			.time_L{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
			.time_R{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
			}
			.time_Rs{
				color: #cccccc;
			}
		}
		
	}
	.item_month{
		background-color: #f3f6f8;
		margin-top: 20rpx;
		.month_tit{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			.tits_L{
				flex: 1;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
			.tits_R{
				flex: 0 0 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #0091ff;
				text-align: right;
				
			}
		}
		.nodata{
			width: 720rpx;
			margin: 0 auto;
			font-size: 28rpx;
			font-weight: 400;
			height: 100rpx;
			text-align: center;
			color: #cccccc;
		}
		.month_state{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1rpx #e9e9e9 solid;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
			.mstate_L{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
			}
			.mstate_R{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				margin-right: 10rpx;
				color: #333333;
			}
		}
		.month_time{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			.mtime_L{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				
			}
			.mtime_R{
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-weight: 400;
				color: #cccccc;
				
			}
			
		}
		.month_record{
			@extend %widthMargin;
			display: flex;
			flex-direction: row;
			// height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			padding-bottom: 20rpx;
			
			.rec_L{
				flex: 0 0 180rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				border-bottom: 1rpx #e9e9e9 solid;
			}
			.rec_R{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				text-align: right;
				image{
					padding: 10rpx;
					width: 128rpx;
					height: 128rpx;
					border:1rpx #C0C0C0 solid;
					margin: 10rpx;
				}
				.rec_area{
					// height: 60rpx;
					padding: 20rpx;
					border-bottom: 1rpx #e9e9e9 solid;
					text-align: right;
					textarea{
						display: block;
						line-height: 1.5;
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
		
	}
	.item_record{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		.record{
			@extend %widthMargin;
			padding: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			flex-direction: row;
			.record_L{
				flex: 1;
				font-size: 36rpx;
				font-weight: 600;
				color: #333333;
			}
			.record_R{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #0091ff;
				text-align: right;
				padding-right: 20rpx;
			}
		}
		.taskOne{
			@extend %widthMargin;
			padding: 20rpx;
			// height: 60rpx;
			line-height: 60rpx;
			
			.taskOne_tit{
				display: flex;
				flex-direction: row;
				height: 80rpx;
				.tit_L{
					flex: 0 0 150rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
				.tit_R{
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}
			.taskOne_type{
				display: flex;
				flex-direction: row;
				height: 80rpx;
				border-bottom: 1rpx #e9e9e9 solid;
				.type_L{
					flex: 0 0 150rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				.type_R{
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.taskOne_record{
				@extend %widthMargin;
				display: flex;
				flex-direction: row;
				// height: 60rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				.trec_L{
					flex: 0 0 180rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					border-bottom: 1rpx #e9e9e9 solid;
				}
				.trec_R{
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					text-align: right;
					image{
						padding: 10rpx;
						width: 128rpx;
						height: 128rpx;
						border:1rpx #C0C0C0 solid;
						margin: 10rpx;
					}
					.trec_area{
						// height: 60rpx;
						width: 100%;
						padding: 20rpx 0 20rpx 0;
						border-bottom: 1rpx #e9e9e9 solid;
						text-align: right;
						textarea{
							display: block;
							line-height: 1.5;
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		.empty{
			height: 130rpx;
			line-height: 130rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #cccccc;
		}
	}
	.item_botm{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: #FFFFFF;
		padding: 0 20rpx 0rpx 20rpx;
		height: 98rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.botm{
			@extend %widthMargin;
			height: 70rpx;
			background: #0091ff;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}
		.botms{
			@extend %widthMargin;
			height: 70rpx;
			background: #efefef;
			border-radius: 8rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #cccccc;
		}
	}
	.model_radio{
		display: flex;
		flex-direction: column;
		min-height: 90rpx;
		padding: 32rpx 24rpx;
		.radio_one{
			display: flex;
		}
		.radio_two{
			display: flex;
		}
	}
	.box {
		background: #ffffff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		padding: 20rpx;
		.box_title {
			font-size: 32rpx;
			font-weight: 600;
			display: flex;
			height: 60rpx;
			justify-content: space-between;
			margin-bottom: 24rpx;
		}
		.tarkList {
			display: flex;
			padding-left: 40rpx;
			height: 70rpx;
			align-items: center;
			color: #333;
			.time {
				padding-right: 40rpx;
				color: #666;
			}
			.tark {
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
	.lines{
		// position: absolute;
		// left: 0;
		// right: 0;
		// border: 8rpx #d8d8d8 solid;
		// margin: 20rpx 0 20rpx 0;
		// box-sizing: border-box;
	}

</style>
